<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="{{description}}">
    <meta name="author" content="">
    <link rel="icon" href="./img/favicon.png">
    <title>{{appName}}</title>
    <link href="css/editor.css" rel="stylesheet">
    <link href="css/drag-n-drop.css" rel="stylesheet">
    <link href="css/line-awesome.css" rel="stylesheet">
    <link href="./libs/select2/select2.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./libs/jquery-ui-1.12.1/jquery-ui.min.css">
    <link rel="stylesheet" href="./libs/jquery-contextmenu/jquery.contextMenu.min.css">
</head>

<body>
    <div id="vvveb-builder">
        <div id="top-panel">
            <div class="btn-group mr-3 ml-3" role="group">
                <button class="btn btn-light" title="Undo (Ctrl/Cmd + Z)" id="undo-btn" data-vvveb-action="undo"
                    data-vvveb-shortcut="ctrl+z">
                    <i class="la la-undo"></i>
                </button>
                <button id="undo-history-btn" type="button" disabled class="btn btn-light dropdown-toggle dropdown-toggle-split" data-vvveb-action="showUndoHistory" data-toggle="dropdown">
                </button>
                <div class="dropdown-menu" id="{{undoHistoryId}}">
                    <div style="max-height: 300px; height: auto; overflow: auto;"></div>
                    <div class="dropdown-divider" id="{{undoHistoryDividerId}}"></div>
                    <a class="dropdown-item" href="#" id="{{undoHistoryFooterId}}">Cancel</a>
                </div>
                <button class="btn btn-light" title="Redo (Ctrl/Cmd + Y)" id="redo-btn" data-vvveb-action="redo"
                    data-vvveb-shortcut="ctrl+y">
                    <i class="la la-undo la-flip-horizontal"></i>
                </button>
                <button class="btn btn-light" title="Fullscreen (F11)" id="fullscreen-btn" data-toggle="button"
                    aria-pressed="false" data-vvveb-action="fullscreen">
                    <i class="la la-arrows"></i>
                </button>
                <button class="btn btn-light" title="Preview" id="preview-btn" type="button" data-toggle="button"
                    aria-pressed="false" data-vvveb-action="preview">
                    <i class="la la-eye"></i>
                </button>
                <button class="btn btn-light" title="Check generated file" id="check-btn" data-vvveb-action="check"
                    data-vvveb-shortcut="ctrl+e">
                    <i class="la la-file-text"></i>
                </button>
                <input type="file" id="file-input" style="display:none" accept=".htm, .html">
                <button class="btn btn-light" title="Upload" id="upload-btn" data-vvveb-action="upload">
                    <i class="la la-cloud-upload"></i>
                </button>
                <button class="btn btn-light" title="Download (Ctrl + D)" id="download-btn" data-vvveb-action="download"
                    data-vvveb-shortcut="ctrl+d">
                    <i class="la la-cloud-download"></i>
                </button>
                <button class="btn btn-light" title="Switch theme" id="switch-theme" data-vvveb-action="switchTheme">
                    <i class="la la-list"></i>
                </button>
                <!-- <button class="btn btn-light" title="Download with external files" id="download-with-external-files-btn" data-vvveb-action="downloadWithExternalFiles">
						<i class="la la-archive"></i>
					</button> -->
                <button id="mobile-view" data-view="mobile" class="btn btn-light" title="Mobile view" data-vvveb-action="viewport">
                    <i class="la la-mobile-phone"></i>
                </button>
                <button id="tablet-view" data-view="tablet" class="btn btn-light" title="Tablet view" data-vvveb-action="viewport">
                    <i class="la la-tablet"></i>
                </button>
                <button id="desktop-view" data-view="" class="btn btn-light" title="Desktop view" data-vvveb-action="viewport">
                    <i class="la la-laptop"></i>
                </button>
            </div>
        </div>
        <div id="canvas">
            <div id="iframe-wrapper">
                <div id="iframe-layer">
                    <div id="highlight-box">
                        <div id="highlight-name"></div>
                    </div>
                    <div id="select-box">
                        <div id="wysiwyg-editor">
                            <a id="bold-btn" href="" title="Bold">
                                <i>
                                    <strong>B</strong>
                                </i>
                            </a>
                            <a id="italic-btn" href="" title="Italic">
                                <i>I</i>
                            </a>
                            <a id="underline-btn" href="" title="Underline">
                                <u>u</u>
                            </a>
                            <a id="strike-btn" href="" title="Strikeout">
                                <strike>S</strike>
                            </a>
                            <a id="link-btn" href="" title="Create link">
                                <strong>a</strong>
                            </a>
                        </div>
                        <div id="select-actions">
                            <div id="with-ctrl-key">
                                <a id="left-align" href="" title="Left">
                                    <i class="la la-align-left"></i>
                                </a>
                                <a id="center-align" href="" title="Center">
                                    <i class="la la-align-center"></i>
                                </a>
                                <a id="right-align" href="" title="Right">
                                    <i class="la la-align-right"></i>
                                </a>
                                <a id="top-align" href="" title="Top">
                                    <i class="la la-align-left" style="transform: rotate(90deg);"></i>
                                </a>
                                <a id="middle-align" href="" title="Middle">
                                    <i class="la la-align-center"></i>
                                </a>
                                <a id="bottom-align" href="" title="Bottom">
                                    <i class="la la-align-right" style="transform: rotate(90deg);"></i>
                                </a>
                                <a id="{{multiSelectedCopy}}" href="" title="Copy">
                                    <i class="la la-copy"></i>
                                </a>
                                <a id="{{multiSelectedDelete}}" href="" title="Delete">
                                    <i class="la la-trash"></i>
                                </a>
                            </div>
                            <div id="without-ctrl-key">
                                <a id="parent-box" href="" title="Select parent">
                                    <i class="la la-level-down la-rotate-180"></i>
                                </a>
                                <a id="container-box" href="" title="Select container">
                                    <i class="ion-earth"></i>
                                </a>
                                {{!-- <a id="up-box" href="" title="Move element up">
                                    <i class="la la-arrow-up"></i>
                                </a>
                                <a id="down-box" href="" title="Move element down">
                                    <i class="la la-arrow-down"></i>
                                </a> --}}
                                <a id="clone-box" href="" title="Clone element">
                                    <i class="la la-copy"></i>
                                </a>
                                <a id="delete-box" href="" title="Remove element">
                                    <i class="la la-trash"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <iframe src="about:none" id="iframeId" name="myFrame"></iframe>
            </div>
        </div>
        <div id="menu-panel">
            <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                <a class="navbar-brand" href="javascript: void(0)">{{appName}}</a>
                <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                    <div class="navbar-nav">
                        <a class="nav-item nav-link active" href="javascript:void(0);">{{components}}
                            <span class="sr-only">(current)</span>
                        </a>
                        <a id="attribute-settings" class="nav-item nav-link" href="javascript:void(0);">{{settings}}</a>
                    </div>
                </div>
            </nav>
        </div>
        <div id="left-panel">
            <div id="filemanager">
                <div class="header">
                    <a href="#">Pages</a>
                </div>
                <div class="tree">
                    <ol>
                    </ol>
                </div>
            </div>
            <div id="components">
                <div class="header">
                    <input class="form-control form-control-sm" placeholder="点击搜索组件" type="text" id="component-search"
                        data-vvveb-action="componentSearch" data-vvveb-on="keyup">
                    <button id="clear-backspace" data-vvveb-action="clearComponentSearch">
                        <i class="la la-close"></i>
                    </button>
                </div>
                <div id="components-sidepane" class="sidepane">
                    <div>
                        <ul id="components-list" class="clearfix">
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div id="right-panel">
            <div id="component-properties">
            </div>
        </div>
        <!-- export html modal-->
        <div class="modal fade" id="textarea-modal" tabindex="-1" role="dialog" aria-labelledby="textarea-modal"
            aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Export html</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <textarea rows="20" cols="150" class="form-control"></textarea>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="dialog-form" title="Export File" style="display: none;">
        <form style="margin-top: 50px;">
            <fieldset>
                <legend>Select exported file type: </legend>
                <label title="{{defaultBundledHtmlFilenameTitle}}" for="radio-1">{{defaultBundledHtmlFilename}}</label>
                <input type="radio" name="file" id="radio-1" value="{{defaultBundledHtmlFilename}}">
                <label title="{{defaultHtmlFilenameTitle}}" for="radio-2">{{defaultHtmlFilename}}</label>
                <input type="radio" name="file" id="radio-2" value="{{defaultHtmlFilename}}">
                <label title="{{defaultJavaScriptFilenameTitle}}" for="radio-3">{{defaultJavaScriptFilename}}</label>
                <input type="radio" name="file" id="radio-3" value="{{defaultJavaScriptFilename}}">
                <label title="{{defaultZipFilenameTitle}}" for="radio-4">{{defaultZipFilename}}</label>
                <input type="radio" name="file" id="radio-4" value="{{defaultZipFilename}}">
            </fieldset>
        </form>
    </div>
    <div id="themes-dialog" title="Available Themes" style="display: none;">
        <form style="margin-top: 50px;">
            <fieldset>
                <label for="name">Themes</label>
                <select></select>
            </fieldset>
        </form>
    </div>
    <div id="dialog-confirm" title="{{emptyPagesTitle}}" style="display: none;">
        <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>{{emptyPagesContent}}</p>
    </div>
    <div id="{{basicDialogId}}" title="Basic dialog" style="display: none;">
        <p>This is the default dialog which is useful for displaying information. The dialog window can be moved,
            resized and closed with the 'x' icon.</p>
    </div>
    <!-- jquery-->
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.hotkeys.js"></script>
    <script src="libs/select2/select2.min.js"></script>
    <!-- bootstrap-->
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- jquery-ui -->
    <script src="libs/jquery-ui-1.12.1/jquery-ui.min.js"></script>
    <script src="libs/jquery-ui-droppable-iframe.js"></script>
    <!-- js-beautify -->
    <script src="libs/beautify.js"></script>
    <script src="libs/beautify-css.js"></script>
    <script src="libs/beautify-html.js"></script>
    <script src="dist/main.js"></script>
    <!-- code mirror - code editor syntax highlight -->
    <link href="libs/codemirror/lib/codemirror.css" rel="stylesheet" />
    <link href="libs/codemirror/theme/material.css" rel="stylesheet" />
    <script src="libs/codemirror/lib/codemirror.js"></script>
    <script src="libs/codemirror/lib/xml.js"></script>
    <script src="libs/codemirror/lib/formatting.js"></script>
    <script src="libs/jquery-contextmenu/jquery.contextMenu.min.js"></script>
    <script src="libs/jquery-contextmenu/jquery.ui.position.min.js"></script>
</body>

</html>